<template>
    <div class="giteemanager-edit">
        <div class="control">
            <i-button type="success" @click="post_submit">完成修改</i-button>
            <i-button type="error">取消修改</i-button>
            <RadioGroup v-model="edit.mode" type="button">
                <i-radio :label="0">分栏模式</i-radio>
                <i-radio :label="1">分页模式</i-radio>
            </RadioGroup>
        </div>
        <Split v-model="split_percent" v-if="edit.mode === 0" class="split-main">
            <div slot="left">
                <i-input class="edit-field" v-model="content" type="textarea" placeholder="Enter something..."/>
            </div>
            <div slot="right">
                <div v-html="marked(content)" class="preview"></div>
            </div>
        </Split>
        <Tabs type="card" v-else class="tab-main">
            <TabPane label="标签一" class="tab-sub-main">
                <i-input class="edit-field" v-model="content" type="textarea" placeholder="Enter something..."/>
            </TabPane>
            <TabPane label="标签二">
                <div v-html="marked(content)" class="preview"></div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script lang="coffee">
    import marked from 'marked'
    import 'iview/dist/styles/iview.css'
    import {Input, Split, RadioGroup, Radio, Button, Tabs, TabPane} from 'iview'

    export default
        name: "edit",
        components: {'i-input': Input, Split, RadioGroup, 'i-radio': Radio, 'i-button': Button, Tabs, TabPane}
        data: () ->
            content: '',
            marked: marked,
            split_percent: 0.5,
            edit:
                mode: 1,
            post_submit: ()->
                console.error 'nothing set on post submit'
        methods:
            setOnPostSubmit: (cb) ->
                this.post_submit = cb

</script>

<style scoped lang="stylus">
    .giteemanager-edit
        .control
            margin: 10px
        /*.tab-main*/
            /*height: 100%*/
            /*width 100%*/
            /*position absolute*/
            /*.tab-sub-main*/
                /*height 100%*/
            /*.edit-field*/
                /*display: flex*/
            /*.edit-field, .preview*/
                /*height: 100%*/
                /*position: absolute*/
        .split-main
            height: 100%
            position absolute
            .preview
                width: 100%
                padding: 10px
                overflow-y: scroll
            .edit-field
                display: flex
            .edit-field, .preview
                height: 100%
                position: absolute
</style>